<script setup lang="ts">
import { shopCarPage } from "~/api/goods";

useSeoMeta({
  title: "购物车 - 技能猴子",
  ogTitle: "购物车 - 技能猴子",
  description: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
  ogDescription: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
});

onMounted(() => {
  getList();
});

const params = ref({
  pageNum: 1,
  pageSize: 500,
});
const list = ref([]);
const getList = async () => {
  try {
    const data = await shopCarPage(params.value);
    list.value = data.rows;
  } catch (e) {
    console.log(e);
  }
};
</script>

<template>
  <BaseHeaderMenuWhite bg-color="white" />
  <div class="body">
    <h4 class="page-title">购物车</h4>
    <div class="cart-list">
      <CartItem
        v-for="item of list"
        :key="item.id"
        :dataItem="item"
        @reloadList="getList"
      />
      <el-empty
        v-if="list.length === 0"
        style="margin-top: 50px"
        description="空空如也~"
      ></el-empty>
    </div>
  </div>
  <BaseFooter />
</template>

<style scoped lang="scss">
.body {
  padding-top: 80px;
  background: #f9f9f9;
}
.page-title {
  color: #191e28;
  font-size: 20px;
  width: 1100px;
  margin: 0 auto;
  padding-top: 32px;
  padding-bottom: 16px;
}
.cart-list {
  width: 1100px;
  min-height: 500px;
  margin: 0 auto;
  padding-bottom: 36px;
}
</style>
